<?php
global $basic_short_elements_setting;
global $contact_basic_properties_setting;
?>
<div id="master">	
	<!-- Nino main nav
    ================================================== -->
    <ul id="nino-mainmenu" class="clearafter">
    	<li class="nino-brand"><a href="#">Nino contact pro</a></li>
    	<li><a href="#" class="nino-openForm"><span class="fa fa-th-large"></span> Form</a></li>
    	<li><a href="#" class="nino-openSettings"><span class="fa fa-asterisk"></span> Settings</a></li>
    	<li><a href="#" class="nino-openElements"><span class="fa fa-plus"></span> Elements</a></li>
    	<li><a href="#" class="nino-openClipboard"><span class="fa fa-clipboard"></span> Clipboard</a></li>
	</ul>
	
	<!-- Nino Main Settings
    ================================================== -->
	<div id="nino-mainSettings" class="clearafter nino-fullFormPreview">

		<!-- Left Side -->
		<div class="nino-leftSide">
		
			<!-- Nino Other Settings -->
			<div class="nino-otherSettings">
	
				<!-- open / create new form -->
				<div class="nino-otherSettingsItem nino-createForm clearafter nino-hidden">
					<div class="nino-otherSettingsNav">
						<span class="nino-icon fa fa-angle-left"></span>
						
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li class="active"><a href="#nino-newForm" role="tab" data-toggle="tab">New</a></li>
							<li><a href="#nino-openForm" role="tab" data-toggle="tab">Open</a></li>
						</ul>
					</div>
					<div class="nino-otherSettingsContent">
					
						<!-- Tab panes -->
						<div class="tab-content nino-hideScroll">
							<div class="tab-pane active nino-viewport" id="nino-newForm">
								<h2 class="title">New</h2>
								<a href="#" class="nino-createBlankForm"><span class="nino-icon fa fa-plus-circle"></span> Blank Form</a>
								<ul class="clearafter nino-availableLayout">
									<li class="active"><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
									<li><img src="" /></li>
								</ul>
							</div>
							<div class="tab-pane nino-viewport" id="nino-openForm">
								<h2 class="title">Open</h2>
								<div class="nino-listAllForm">
									<h3>Recent Forms</h3>
									<ul>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 1</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 2</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 3</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 4</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 5</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 6</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 1</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 2</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 3</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 4</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 5</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 6</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 1</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 2</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 3</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 4</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 5</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 6</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 1</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 2</a></li>
										<li><a href="#"><span class="nino-icon fa fa-file-text"></span>Form test 3</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
	
				<!-- global settings -->
				<?php include('contact-global-settings.php'); ?>
				
				<!-- Add elements -->
				<div class="nino-otherSettingsItem nino-addElements clearafter nino-hidden">
					<div class="nino-otherSettingsNav">
						<span class="nino-icon fa fa-angle-left"></span>
						
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li class="active"><a href="#nino-addElements" role="tab" data-toggle="tab">Elements</a></li>
						</ul>
					</div>
					<div class="nino-otherSettingsContent nino-fieldSettings">
					
						<!-- Tab panes -->
						<div class="tab-content nino-hideScroll">
							<div class="tab-pane active nino-viewport" id="nino-addElements">
								<h2 class="title">Add Elements</h2>								
								<ul class="clearafter nino-allElements">
									<?php 
									foreach ($basic_short_elements_setting as $key => $group_short_element) {
									?>
									<li>
										<h3><?php echo $group_short_element['text']; ?></h3>
										<ul class="clearafter" id="<?php echo $group_short_element['id']; ?>">
											<?php 
											foreach ($group_short_element['elements'] as $element_key => $short_element) {
											?>
											<li>
												<div class="nino-elementDragAble <?php echo $key != "grid-system" ? "changeElementSettings" : ""?>" nino-type="<?php echo $element_key; ?>">
													<span class="nino-wrapText">
														<span class="fa <?php echo $short_element['icon']; ?>"><?php echo isset($short_element['icon-text']) ? $short_element['icon-text'] : "" ?></span> 
														<?php echo $short_element['text']?>
													</span>
													<?php echo contact_elements_render($element_key, null); ?>
												</div>												
											</li>
											<?php } ?>
										</ul>
									</li>
									<?php
									} 
									?>
								</ul>
							</div>
						</div>
					</div>
				</div>
	
				<!-- Clipboard -->
				<div class="nino-otherSettingsItem nino-clipboard clearafter nino-hidden">
					<div class="nino-otherSettingsNav">
						<span class="nino-icon fa fa-angle-left"></span>
						
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li class="active"><a href="#nino-clipboardItem" role="tab" data-toggle="tab">Clipboard</a></li>
						</ul>
					</div>
					<div class="nino-otherSettingsContent">
					
						<!-- Tab panes -->
						<div class="tab-content nino-hideScroll">
							<div class="tab-pane active nino-viewport" id="nino-clipboardItem">
								<h2 class="title">Clipboard</h2>
								<ul class="nino-listAllClipboard">
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-check-square-o"></span> Checkbox</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Checkbox</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-check-circle-o"></span> Radio button</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Radio button</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-male"></span> Captcha</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Captcha</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-send"></span> Submit Button</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Submit Button</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-paragraph"></span> Paragraph</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Paragraph</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-map-marker"></span> Google Map</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Google Map</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-twitter"></span> Social Link</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Social Link</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-photo"></span> Image</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Image</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-text-width"></span>Text field</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Text Field</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-align-left"></span>Textarea</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Textarea</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-sort-amount-desc"></span>Drop-down</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Drop-down</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-header"></span> Heading 1</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Heading 1</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-header"></span> Heading 2</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Heading 2</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-header"></span> Heading 3</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Heading 3</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-header"></span> Heading 4</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Heading 4</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-header"></span> Heading 5</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Heading 5</span>
										</div>
									</li>
									<li>
										<a href="#" class="nino-clipboardName"><span class="nino-icon fa fa-header"></span> Heading 6</a>
										<div class="nino-clipboardAction">
											<a href="#" class="nino-clipboardUse">use</a> |
											<a href="#" class="nino-clipboardRemove">remove</a> |
											<span>Heading 6</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Add To Website -->
				<div class="nino-otherSettingsItem nino-addFormToSite clearafter nino-hidden">
					<div class="nino-otherSettingsNav">
						<span class="nino-icon fa fa-angle-left"></span>
						
						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li class="active"><a href="#nino-addFormToSite" role="tab" data-toggle="tab">Add To Site</a></li>
						</ul>
					</div>
					<div class="nino-otherSettingsContent">
					
						<!-- Tab panes -->
						<div class="tab-content nino-hideScroll">
							<div class="tab-pane active nino-viewport" id="nino-addFormToSite">
								<h2 class="title">Add Form To Your Site</h2>
								<ul class="nino-listAllClipboard">
									<li>
										<h3>Via Shortcode</h3>
									</li>
									<li>
										<h3>Via Widget</h3>
									</li>
									<li>
										<h3>Via Page / Post</h3>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Nino Field Settings -->
			<div id="nino-fieldSettingArea" class="nino-fieldSettings">
				<div class="nino-fieldSettingsHeader">
					<a href="#"><span class="nino-icon fa fa-trash"></span> Delete</a>
					<a href="#"><span class="nino-icon fa fa-copy"></span> Dupplicate</a>
					<a href="#"><span class="nino-icon fa fa-clipboard"></span> Copy to Clipboard</a>
				</div>
				
				<?php
				foreach ($contact_basic_properties_setting as $key => $properties ) {
					echo contact_property_render($key);
				}
				?>
				<?php //include('contact-elements-settings.php'); ?>
			</div>
		</div>

		<!-- Right Side -->
		<div class="nino-rightSide">
			
			<div class="nino-formAction clearafter">
				<input type="text" name="form-name" class="nino-formName" placeholder="Form name here">
				<a href="#" class="nino-saveForm"><span class="nino-icon fa fa-save"></span> Save</a>
				<a href="#" class="nino-deleteForm"><span class="nino-icon fa fa-trash"></span> Delete</a>
				<a href="#" class="nino-previewForm"><span class="nino-icon fa fa-desktop"></span> Preview</a>
				<a href="#" class="nino-addToSite"><span class="nino-icon fa fa-globe"></span> Add to site</a>
			</div>
			
			<!-- Nino Field Selected -->
			<div class="nino-fieldSelected nino-hideScroll">
				<div class="nino-viewport">
					<div id="nino-form-builder-area">
						<div class="nino-grid-col">
							
						</div>
					</div>
					
					<?php //include('demo/contact-elements-demo.php'); ?>
				</div>
			</div>
			
			
			<!-- Nino Field Settings -->
			<div class="nino-fieldSettings">
				<?php //include('contact-elements-settings.php'); ?>
			</div>
			
		</div>
	</div>
</div>